<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Split it up</title> 
</head> 

<body> 
<div data-role="page" id="bills-archive">
    <div data-role="header" data-position="fixed">
        <a href="start.html" data-icon="arrow-l" data-role="button" data-rel="back">back</a>
        <h1>my bills</h1>
    </div>
    <!-- /header -->
    
    <div data-role="content">   
        <!-- bills list -->
        <div style="clear:both;margin-top:2%;" id="bills-archive-list">
            <ul data-role="listview" data-theme="a" data-inset="true"  data-split-icon="delete" data-split-theme="b">
                <li>
                    <a href="#">
                        <h3>food item name 300.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                
                <li>
                    <a href="#">
                        <h3>food item name 300.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                
                <li>
                    <a href="#">
                        <h3>food item name 300.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                <li>
                    <a href="#">
                        <h3>10% discount 100.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                <li>
                    <a href="#">
                        <h3>10% tax 10.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
            </ul>
        </div>
    </div><!-- /content -->
</div><!-- /page -->
</body>
</html>